<template>
  <div
    style="
      background: #2f4f4f;
      height: 100vh;
      border: 0;
      box-shadow: 5px 0px 5px -5px rgba(0, 0, 0, 0.5);
    "
  >
    <div class="logo">
      <div v-if="!props.isOpen" class="title">博客管理系统</div>

      <div v-if="props.isOpen" style="width: 60px">
        <img
          :src="logo"
          alt="博客管理系统"
          style="
            width: 40px;
            height: 40px;
            margin-top: 15px;
            box-shadow:
              5px 5px 5px -5px rgba(0, 0, 0, 0.5),
              -5px -5px 5px -5px rgba(0, 0, 0, 0.5);
            border-radius: 50%;
          "
        />
      </div>
    </div>

    <el-menu
      mode="vertical"
      default-active="/main"
      active-text-color="#006e54"
      background-color="#2F4F4F"
      text-color="#fff"
      class="menu"
      :router="true"
      :collapse="props.isOpen"
      @open="handleOpen"
      @close="handleClose"
      @select="handlerSelect"
    >
      <template v-for="(menu, index) in props.dataList" :key="index">
        <el-sub-menu v-if="menu.childMenu.length > 0" :index="menu.id">
          <template #title>
            <el-icon><component :is="menu.icon" /></el-icon>
            <span>{{ menu.menuName }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              :index="cmenu.menuPath"
              v-for="(cmenu, item) of menu.childMenu"
              :key="item"
            >
              <el-icon><component :is="cmenu.icon" /></el-icon>
              <template #title>{{ cmenu.menuName }}</template>
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

        <el-menu-item :index="menu.menuPath" v-else>
          <el-icon><component :is="menu.icon" /></el-icon>
          <template #title>{{ menu.menuName }}</template>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script setup>
import { nextTick, onMounted, ref } from 'vue'
import logo from '@/assets/img/logo.png'

const props = defineProps({
  dataList: {
    type: Array
  },
  isOpen: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['select-menu'])

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}

const handlerSelect = (index) => {
  const item = props.dataList.find((item) => item.menuPath === index)
  emit('select-menu',item)
}

onMounted(() => {
  nextTick(() => {
    console.log('cescsdc', props.dataList)
  }, 200)
})
</script>

<style scoped>
.menu:not(.el-menu--collapse) {
  width: 200px;
  height: 100vh;
  overflow-y: scroll;
}

/* .list-box::-webkit-scrollbar {
    width: 0px;
} */
.menu {
  padding-top: 60px;
}

.logo {
  text-align: center;
  height: 50px;
  line-height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background: #2f4f4f;
}

.title {
  color: #fff;
  font-weight: 600;
  width: 189px;
}

/* 滚动条隐藏 */
.menu::-webkit-scrollbar {
  display: none;
}
</style>
